/*
 * @Author: xuchao 
 * @Date: 2018-05-16 14:10:53 
 * @Last Modified by: xuchao
 * @Last Modified time: 2018-06-26 11:41:03
 */
import React, { Component } from 'react';
// import { Link } from 'react-router-dom';
import { Layout, Modal, Input, Select, DatePicker } from 'antd';
import './style.less';

class Service extends Component {
    constructor(props){
        super(props)
        this.state = {
            flTabs: [{
                name: '有害程序事件',
                list: ['一、计算机病毒事件是指蓄意制造、传播计算机病毒，或是因受到计算机病毒影响而导致的信息安全事件。计算机病毒是指编制或者在计算机程序中插入的一组计算机指令或者程序代码，它可以破坏计算机功能或者毁坏数据，影响计算机使用，并能自我复制；','二、蠕虫事件是指蓄意制造、传播蠕虫，或是因受到蠕虫影响而导致的信息安全事件。蠕虫是指除计算机病毒以外，利用信息系统缺陷，通过网络自动复制并传播的有害程序；','三、 特洛伊木马事件是指蓄意制造、传播特洛伊木马程序，或是因受到特洛伊木马程序影响而导致的信息安全事件。特洛伊木马程序是指伪装在信息系统中的一种有害程序，具有控制该信息系统或进行信息窃取等对该信息系统有害的功能；','四、僵尸网络事件是指利用僵尸工具软件，形成僵尸网络而导致的信息安全事件。僵尸网络是指网络上受到黑客集中控制的一群计算机，它可以被用于伺机发起网络攻击，进行信息窃取或传播木马、蠕虫等其他有害程序；','五、混合攻击程序事件是指蓄意制造、传播混合攻击程序，或是因受到混合攻击程序影响而导致的信息安全事件。混合攻击程序是指利用多种方法传播和感染其它系统的有害程序，可能兼有计算机病毒、蠕虫、木马或僵尸网络等多种特征。混合攻击程序事件也可以是一系列有害程序综合作用的结果，例如一个计算机病毒或蠕虫在侵入系统后安装木马程序等；','六、网页内嵌恶意代码事件是指蓄意制造、传播网页内嵌恶意代码，或是因受到网页内嵌恶意代码影响而导致的信息安全事件。网页内嵌恶意代码是指内嵌在网页中，未经允许由浏览器执行，影响信息系统正常运行的有害程序；','七、其它有害程序事件是指不能包含在以上6个子类之中的有害程序事件。']
            }, {
                name: '网络攻击事件',
                list: ['一、拒绝服务攻击事件是指利用信息系统缺陷、或通过暴力攻击的手段，以大量消耗信息系统的CPU、内存、磁盘空间或网络带宽等资源，从而影响信息系统正常运行为目的的信息安全事件；','二、后门攻击事件是指利用软件系统、硬件系统设计过程中留下的后门或有害程序所设置的后门而对信息系统实施的攻击的信息安全事件；','三、漏洞攻击事件是指除拒绝服务攻击事件和后门攻击事件之外，利用信息系统配置缺陷、协议缺陷、程序缺陷等漏洞，对信息系统实施攻击的信息安全事件；','四、网络扫描窃听事件是指利用网络扫描或窃听软件，获取信息系统网络配置、端口、服务、存在的脆弱性等特征而导致的信息安全事件；','五、网络钓鱼事件是指利用欺骗性的计算机网络技术，使用户泄漏重要信息而导致的信息安全事件。例如，利用欺骗性电子邮件获取用户银行帐号密码等；','六、干扰事件是指通过技术手段对网络进行干扰，或对广播电视有线或无线传输网络进行插播，对卫星广播电视信号非法攻击等导致的信息安全事件；','七、其他网络攻击事件是指不能被包含在以上6个子类之中的网络攻击事件。']
            }, {
                name: '信息破坏事件',
                list: ['一、信息篡改事件是指未经授权将信息系统中的信息更换为攻击者所提供的信息而导致的信息安全事件，例如网页篡改等导致的信息安全事件；','二、信息假冒事件是指通过假冒他人信息系统收发信息而导致的信息安全事件，例如网页假冒等导致的信息安全事件；','三、信息泄漏事件是指因误操作、软硬件缺陷或电磁泄漏等因素导致信息系统中的保密、敏感、个人隐私等信息暴露于未经授权者而导致的信息安全事件；','四、信息窃取事件是指未经授权用户利用可能的技术手段恶意主动获取信息系统中信息而导致的信息安全事件；','五、信息丢失事件是指因误操作、人为蓄意或软硬件缺陷等因素导致信息系统中的信息丢失而导致的信息安全事件；','六、其它信息破坏事件是指不能被包含在以上5个子类之中的信息破坏事件。']
            }, {
                name: '信息内容安全事件',
                list: ['一、违反宪法和法律、行政法规的信息安全事件；','二、针对社会事项进行讨论、评论形成网上敏感的舆论热点，出现一定规模炒作的信息安全事件；','三、组织串连、煽动集会游行的信息安全事件；','四、其他信息内容安全事件等4个子类。']
            }, {
                name: '设备设施故障',
                list: ['一、软硬件自身故障是指因信息系统中硬件设备的自然故障、软硬件设计缺陷或者软硬件运行环境发生变化等而导致的信息安全事件；','二、外围保障设施故障是指由于保障信息系统正常运行所必须的外部设施出现故障而导致的信息安全事件，例如电力故障、外围网络故障等导致的信息安全事件；','三、人为破坏事故是指人为蓄意的对保障信息系统正常运行的硬件、软件等实施窃取、破坏造成的信息安全事件；或由于人为的遗失、误操作以及其他无意行为造成信息系统硬件、软件等遭到破坏，影响信息系统正常运行的信息安全事件；','四、其它设备设施故障是指不能被包含在以上3个子类之中的设备设施故障而导致的信息安全事件。']
            }, {
                name: '灾害性事件',
                list: ['灾害性事件包括水灾、台风、地震、雷击、坍塌、火灾、恐怖袭击、战争等导致的信息安全事件。']
            }, {
                name: '其他事件',
                list: ['其他事件类别是指不能归为以上其他基本分类的信息安全事件。']
            }],
            flCurrentIndex: 0,
            djTabs: [{
                name: '特别重大事件',
                list: ['特别重大事件是指能够导致特别严重影响或破坏的信息安全事件，包括以下情况：','一、会使特别重要信息系统遭受特别严重的系统损失；','二、产生特别重大的社会影响。']
            }, {
                name: '重大事件',
                list: ['重大事件是指能够导致严重影响或破坏的信息安全事件，包括以下情况：','一、会使特别重要信息系统遭受严重的系统损失、或使重要信息系统遭受特别严重的系统损失；','二、产生的重大的社会影响。']
            }, {
                name: '较大事件',
                list: ['较大事件是指能够导致较严重影响或破坏的信息安全事件，包括以下情况：','一、会使特别重要信息系统遭受较大的系统损失、或使重要信息系统遭受严重的系统损失、一般信息信息系统遭受特别严重的系统损失；','二、产生较大的社会影响。']
            }, {
                name: '一般事件',
                list: ['一般事件是指不满足以上条件的信息安全事件，包括以下情况：','一、会使特别重要信息系统遭受较小的系统损失、或使重要信息系统遭受较大的系统损失，一般信息系统遭受严重或严重以下级别的系统损失；','二、产生一般的社会影响。']
            }],
            djCurrentIndex: 0,
            visible: false
        }
    }

    flTabToggle(index){
        this.setState({
            flCurrentIndex: index
        })
    }  

    djTabToggle(index){
        this.setState({
            djCurrentIndex: index
        })
    }  

    render() {
        const { flTabs, flCurrentIndex, djTabs, djCurrentIndex } = this.state;
        return (
            <Layout.Content className="yjxy">
                <div className="banner animated fadeIn">
                    <div className="search">
                        <input type="text" placeholder="F:\OA_CMS\wwwroot\oa_2018.5.31.rar" />
                        <button>
                            上传
                        </button>
                    </div>
                </div> 
                <div className="gs bg">
                    <div className="center">
                        <p>当您碰到信息安全事件时，可通过本平台提交事件响应请求，平台将安排专业团队对您的安全事件进行响应。您也可以只上报事件不需要平台安排响应支撑。平台将对所有上报的安全事件进行持续跟踪和支撑。 </p>
                    </div>
                </div>
                <div className="sjfl">
                    <div className="center">
                        <h1>事件分类</h1>
                        <div className="border"></div>
                        <ul>
                            <li>
                                <div className="icon">
                                    <i className="cxsj"/>
                                </div>
                                <p>有害程序事件</p>
                            </li>
                            <li>
                                <div className="icon">
                                    <i className="gjsj"/>
                                </div>
                                <p>网络攻击事件</p>
                            </li>
                            <li>
                                <div className="icon">
                                    <i className="phsj"/>
                                </div>
                                <p>信息破坏事件</p>
                            </li>
                            <li>
                                <div className="icon">
                                    <i className="aqsj"/>
                                </div>
                                <p>信息内容安全事件</p>
                            </li>
                            <li>
                                <div className="icon">
                                    <i className="ssgz"/>
                                </div>
                                <p>设备设施故障</p>
                            </li>
                            <li>
                                <div className="icon">
                                    <i className="zhxs"/>
                                </div>
                                <p>灾害性事</p>
                            </li>
                            <li>
                                <div className="icon">
                                    <i className="qtsj"/>
                                </div>
                                <p>其他事件</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div className="sjdj bg">
                    <div className="center">
                        <h1>事件等级</h1>
                        <div className="border" />
                        <ul>
                            <li>
                                <i className="one"/>
                                <p>特别重大事件（Ⅰ级）</p>
                            </li>
                            <li>
                                <i className="two"/>
                                <p>重大事件（Ⅱ级）</p>
                            </li>
                            <li>
                                <i className="three"/>
                                <p>较大事件（Ⅲ级）</p>
                            </li>
                            <li>
                                <i className="four"/>
                                <p>一般事件（Ⅳ级）</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div className="sjsm">
                    <div className="center">
                        <h1>事件分类说明</h1>
                        <div className="border" />
                        <ul>
                            {
                                flTabs && flTabs.map((item, index) => {
                                    return(
                                        <li className={flCurrentIndex===index ? 'active' : ''} onClick={this.flTabToggle.bind(this, index)} key={index} style={{width: '14%'}}>
                                            {item.name}
                                            <span className={flCurrentIndex===index ? 'show' : 'hide'}></span>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                    <div className="toggle bg">
                        <div className="center">
                            {
                                flTabs[flCurrentIndex].list.map((item, index) => {
                                    return (
                                        <p>{item}</p>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
                <div className="sjsm">
                    <div className="center">
                        <h1>事件等级说明</h1>
                        <div className="border" />
                        <ul>
                            {
                                djTabs && djTabs.map((item, index) => {
                                    return(
                                        <li className={djCurrentIndex===index ? 'active' : ''} onClick={this.djTabToggle.bind(this, index)} key={index} style={{width: '25%'}}>
                                            {item.name}
                                            <span className={djCurrentIndex===index ? 'show' : 'hide'}></span>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                    <div className="toggle bg">
                        <div className="center">
                            {
                                djTabs[djCurrentIndex].list.map((item, index) => {
                                    return (
                                        <p>{item}</p>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>                
                <div className="zdfw">
                    <div className="center">
                        <h1>事件详情</h1>
                        <span onClick={()=>{
                            this.setState({
                                visible: true
                            })
                        }}>上报事件</span>
                        <img src={require('@/static/images/yjxy-1.jpg')} alt=""/>
                    </div>
                </div>
                <Modal
                    title="上报事件"
                    visible={this.state.visible}
                    cancelText="取消"
                    okText="提交"
                    onOk={() => {
                        
                    }}
                    onCancel={() => {
                        this.setState({
                            visible: false
                        })
                    }}
                    >
                    <div className="input-item">
                        <label>事件类型：</label>
                        <Input placeholder="请输入事件类型"/>
                    </div>
                    <div className="input-item">
                        <label>事件等级：</label>
                        <Select defaultValue="one">
                            <Select.Option value="one">特大重大事件</Select.Option>
                            <Select.Option value="two">重大事件</Select.Option>
                            <Select.Option value="three">较大事件</Select.Option>
                            <Select.Option value="four">一般事件</Select.Option>
                        </Select>
                    </div>
                    <div className="input-item">
                        <label>事件描述：</label>
                        <Input.TextArea placeholder="请输入事件类型"/>
                    </div>
                    <div className="input-item">
                        <label>发生时间：</label>
                        <DatePicker />
                    </div>
                    <div className="input-item">
                        <label>联系人：</label>
                        <Input placeholder="请输入联系人"/>
                    </div>
                    <div className="input-item">
                        <label>联系方式：</label>
                        <Input placeholder="请输入联系方式"/>
                    </div>
                </Modal>
            </Layout.Content>
        );
    }
}

export default Service;